<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<superviseUnitySelect v-model='formInline.unityId' clearable
						:placeholder='prompt?.unityId' :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')"/>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.userId' prop='userId'>
					<Individual v-model='formInline.userId' clearable :placeholder='prompt?.userId'
						:style="{ width: '100%' }" @change="userIdChange" @blur="formValidateField(ruleFormRef, 'userId')"/>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.familyId' prop='familyId'>
					<familySelect v-model.trim='formInline.familyId' :userId="formInline.userId"
						:disabled="!formInline.userId" clearable :placeholder='prompt?.familyId'
						:style="{ width: '100%' }" @change="familyIdChange" @blur="formValidateField(ruleFormRef, 'familyId')"/>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.deviceIds' prop='deviceIds'>
					<pure-table :data="deviceList" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
						@selection-change="selectionChange" :isShowPag="false" max-height="400px">
					</pure-table>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/regulatory-authorities/regulatory-family/index';
import { getDeviceList } from '@/api/manage/regulatory-authorities/regulatory-family/index'
import superviseUnitySelect from '@/components/select/superviseUnitySelect/superviseUnitySelect.vue'
import Individual from '@/components/select/Individual/Individual.vue'
import familySelect from '@/components/select/familySelect/familySelect.vue'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	userId: [{ required: true, message: prompt?.userId, trigger: 'blur' },],
	userName: [{ required: true, message: prompt?.userName, trigger: 'blur' },],
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
	unityName: [{ required: true, message: prompt?.unityName, trigger: 'blur' },],
	familyId: [{ required: true, message: prompt?.familyId, trigger: 'blur' },],
	familyName: [{ required: true, message: prompt?.familyName, trigger: 'blur' },],
	deviceIds: [{ required: true, message: prompt?.deviceIds, trigger: 'blur' },],
	superviseUnityId: [{ required: true, message: prompt?.superviseUnityId, trigger: 'blur' },],
	superviseUnityName: [{ required: true, message: prompt?.superviseUnityName, trigger: 'blur' },],
	city: [{ required: true, message: prompt?.city, trigger: 'blur' },],
	phone: [{ required: true, message: prompt?.phone, trigger: 'blur' },],
	updatedAt: [{ required: true, message: prompt?.updatedAt, trigger: 'blur' },],
});
const ruleFormRef = ref();
const deviceList = ref([])
const roleTableConfig = [
	{ type: "selection", align: "left" },
	{ prop: 'deviceId', label: titles.deviceId, width: 100 },
	{ prop: 'productName', label: titles.productName },
	{ prop: 'deviceSN', label: titles.deviceSN },
];
const userIdChange = () => {
	props.formInline.familyId = null;
	props.formInline.deviceIds = [];
	deviceList.value = []
}

const familyIdChange = () => {
	props.formInline.deviceIds = [];
	deviceList.value = []
	props.formInline.familyId && getDeviceListInfo();
}

const getDeviceListInfo = () => {
	getDeviceList({ familyId: props.formInline.familyId }).then(res => {
		deviceList.value = res.result
	})
}
const selectionChange = data => {
	props.formInline.deviceIds = data.map(item => item.deviceId);
	formValidateField(ruleFormRef.value, 'deviceIds')
};
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
